@import './token.less';

@trigger-prefix-cls: ~'@{prefix}-trigger';
@popover-prefix-cls: ~'@{prefix}-popover';


.arco-trigger-mask{
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  display: flex;
  flex-shrink: 0;
  flex-grow: 0;
  flex-basis: auto;
  align-items: stretch;
  align-content: flex-start;
  z-index: 9;
}

.@{popover-prefix-cls} {

  &-popup{
    position: relative;
    transition: all 0.3s linear;
  }

  &-position--top &-popup-arrow,
  &-position--tl &-popup-arrow,
  &-position--tr &-popup-arrow {
    border-top: none;
    border-left: none;
    border-bottom-right-radius: @trigger-border-arrow-radius;
  }


  &-position--bottom &-popup-arrow,
  &-position--bl &-popup-arrow,
  &-position--br &-popup-arrow {
    border-right: none;
    border-bottom: none;
    border-top-left-radius: @trigger-border-arrow-radius;
  }

  &-position--left &-popup-arrow,
  &-position--lt &-popup-arrow,
  &-position--lb &-popup-arrow {
    border-bottom: none;
    border-left: none;
    border-top-right-radius: @trigger-border-arrow-radius;
  }

  &-position--right &-popup-arrow,
  &-position--rt &-popup-arrow,
  &-position--rb &-popup-arrow {
    border-top: none;
    border-right: none;
    border-bottom-left-radius: @trigger-border-arrow-radius;
  }
}


.@{trigger-prefix-cls} {

  &-target {
    display: inline-block;
  }

  &-wrapper {
    display: inline-block;
  }


  &-popup {
    position: absolute;
    z-index: @z-index-popup;
  }

  &-content {
      box-sizing: border-box;
      padding: @popup-padding-vertical @popup-padding-horizontal;
      color: @popup-color-content-text;
      font-size: @popup-font-size;
      line-height: @line-height-base;
      background-color: @popup-color-content-bg;
      border: @border-1 solid @popup-color-border;
      border-radius: @popup-border-radius;
      box-shadow: @popup-shadow;
      text-align: left;
      word-wrap: break-word;
      white-space: nowrap;
  }

  &-arrow {
    position: absolute;
    z-index: -1;
    display: block;
    box-sizing: border-box;
    width: @trigger-size-arrow-width;
    height: @trigger-size-arrow-width;
    background-color: @trigger-color-arrow-bg;
    content: '';
    z-index: 1;
    background-color: @popup-color-content-bg;
    border: @border-1 solid @popup-color-border;
  }

}


// .arco-trigger-popupr {
//   display: inline-block;
// }

// .arco-popover-popup {
//   position: relative;
// }

// .arco-trigger-target {
//   display: inline-block;
// }

// .arco-popover-popup-content {
//   box-sizing: border-box;
//   padding: 12px 16px;
//   color: var(--color-text-2);
//   font-size: 14px;
//   line-height: 1.5715;
//   background-color: var(--color-bg-popup);
//   border: 1px solid var(--color-neutral-3);
//   border-radius: var(--border-radius-medium);
//   box-shadow: 0 4px 10px #0000001a;
// }

// .arco-trigger-popup {
//   position: absolute;
// }

// .arco-trigger-popup-wrapper {
//   position: relative;
// }

// .arco-trigger-arrow {
//   position: absolute;
//   transform: translate(-50%, 50%) rotate(45deg);
//   z-index: 1;
//   display: block;
//   box-sizing: border-box;
//   width: 14px;
//   height: 15px;
//   background-color: var(--color-bg-5);
//   content: "";
// }

// .arco-popover-popup-arrow{
//   z-index: 1;
//   background-color: var(--color-bg-popup);
//   border: 1px solid var(--color-neutral-3);
// }

// .arco-Popover {
//   position: relative;
//   background: $color-bg-2;
//   border-radius: $border-radius-none;
//   transition: box-shadow 0.2s cubic-bezier(0, 0, 1, 1);
// }